<template>
	<zLayout>
		<template v-slot:nav>
			<zNav title="首页" />
		</template>
		<template v-slot:main>
			<view class="main">
				<view class="inner">
					<view class="tabs">
						<view class="tab" v-for="(item,i) in state.tabs" :class='{activeTab:i===state.acIndex}' @click="state.acIndex = i"
							:key="i">
							<text> {{item.text}}</text>
							<image class="slot-image" v-if="i===state.acIndex" :src="arrowBottom"></image>
						</view>
					</view>
					<view class="card">
						<uni-card is-shadow is-full>
							<uni-list :border="false" class="list">
								<uni-list-item v-for="(val,index) in state.list" class="listItem" :key="index">
									<template v-slot:header>
										<view class="slot-header">
											<image class="slot-image" :src="src"></image>
										</view>
									</template>
									<template v-slot:body>
										<view class="slot-body">
											{{val.note}}
										</view>
									</template>
								</uni-list-item>
							</uni-list>
						</uni-card>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:menu>
			<zMenu />
		</template>
	</zLayout>
</template>

<script setup>
	import { getSource } from 'src/plugins/utils'
	const src = getSource('images/home/notice.png');
	const arrowBottom = getSource('images/home/arrowBottom.png');
	const state = reactive({
		acIndex: 0,
		tabs: [
			{ text: '通知公告' },
			{ text: '特色要闻' },
			{ text: '政策法规' },
			{ text: '科技动态' },
		],
		list: [{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜1',
			},
			{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜2',
			},
			{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜3',
			},
			{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜4',
			},
			{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜5',
			},
			{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜6',
			},
			{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜7',
			},
			{
				note: '4日夏季联赛综述:千千逆转库库12+9千千胜8',
			},
		]
	});
</script>

<style lang="less" scoped>
	@import 'index';
</style>